<template>
  <view>
    <view class="topbg">
      <view>
        <u-tabs :list="tabs" :current="current" bg-color="transparent" inactive-color="#c9e8f5" active-color="#fff"
          @change="change"></u-tabs>
      </view>

      <view style="height: 300rpx;"></view>
      <view class="ban"></view>
    </view>

    <u-gap height="64"></u-gap>
    <view class="u-p-24">
      <shop v-for="i in 5" :key="i" @click.native="$goto('/pages/shop/index')"></shop>
    </view>
  </view>
</template>

<script>
  import shop from './components/shop.vue'
  export default {
    components: {
      shop
    },
    data() {
      return {
        tabs: [{
            name: '推荐'
          },
          {
            name: '男装'
          },
          {
            name: '推荐'
          },
          {
            name: '男装'
          },
          {
            name: '推荐'
          },
          {
            name: '男装'
          },
          {
            name: '推荐'
          },
          {
            name: '男装'
          }, {
            name: '推荐'
          },
          {
            name: '男装'
          }
        ],
        current: 0,
      };
    },
    methods: {
      change(index) {
        this.current = index;
        this.getData(true);
      },
    }
  }
</script>

<style lang="scss">
  .topbg {
    background: linear-gradient(90deg, #6ba4f9 0%, #2db2da 41%, #00bcc3 100%);
    position: relative;

    .ban {
      width: 712rpx;
      height: 350rpx;
      background: pink;
      border-radius: 8rpx;
      overflow: hidden;
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translate(-50%, 64rpx);
    }
  }
</style>
